import { Input, Modal, Table, type TableProps } from "antd"
import { forwardRef, useImperativeHandle, useState } from "react"
import { debounce } from 'lodash'

export interface WorkListModalHandle {
    showModal: (data?: any) => void
}

interface DataType {
    key: string | number
    date: string
    person: number
    work: string
    desc: string
    time1: string
    [x: string]: any
}
export type WorkListModalProps = {
    reload?: () => void
}
const WorkListModal = forwardRef<WorkListModalHandle, WorkListModalProps>((props, ref) => {
    const [fetching, setFetching] = useState(false)
    const [isModalOpen, setIsModalOpen] = useState(false)
    const [title, setTitle] = useState('工作日志')
    const [data, setData] = useState<DataType[]>([])
    useImperativeHandle(ref, () => ({
        showModal: (data: any) => {
            setIsModalOpen(true)
            loadData()
        }
    }));
    const handleOk = () => {
        handleCancel()
    };
    const handleCancel = () => {
        setIsModalOpen(false)

    }
    const columns: TableProps<DataType>['columns'] = [
        {
            title: '日期',
            dataIndex: 'date',
            key: 'date',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '人员',
            dataIndex: 'person',
            key: 'person',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '问题',
            dataIndex: 'work',
            key: 'work',
        },
        {
            title: '描述',
            dataIndex: 'desc',
            key: 'desc',
            render: (text) =>  <span>{text}</span>
        },
        {
            title: '已记录',
            dataIndex: 'time1',
            key: 'time1',
        }]
    const loadData = () => {
        setData([])
        setFetching(true)
        // 异步请求资源
        setTimeout(() => {
            setData(Array.from({ length: 10 }, (_, i) => ({ key: i, work: `测试问题描述${i}`, desc: `测试问题模拟${i}`, person: `张三`, time1: '1h', date: '2023-05-01' })) as any[])
            setFetching(false)
        }, 1000)
    }


    return (
        <>
            <Modal centered title={title} width={'800px'} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <Table<DataType> scroll={{ x: 'max-content', y: 500 }} columns={columns} loading={fetching} pagination={false} bordered dataSource={data} />
            </Modal>
        </>
    )
})

export default WorkListModal